<template>
  <div>
    <div class="home">
      <v-header :seller="getSeller" @maskDetail="showMask"></v-header>
      <!--这里是切换的内容展示区域-->
      <div class="tab-wrapper">
        <!-- <tab-bar :getSeller="getSeller" :getRatings="getRatings"></tab-bar> -->
        <tab-bar :tabs="tabs" @btnTabs="btnTabsfn()"></tab-bar>
      </div>
      <!-- <shop-cart v-show="isFooterShow"></shop-cart> -->
    </div>
    <masks :seller="getSeller" v-show="isMasks" @hideMask="hideMaskFn"></masks>
  </div>
</template>
<script>
import { getVal } from "../api";
import vHeader from "./v-header";
import tabBar from "../pages/v-tabBar";
import Goods from "../components/goods";
import Ratings from "../components/ratings";
import Seller from "../components/seller";
// import shopCart from "../components/shop-cart";
import masks from "./mask";
import qs from "query-string";
export default {
  name: "Home",
  components: {
    vHeader,
    tabBar,
    masks,
    // shopCart
  },
  data() {
    return {
      gallData: {},
      getRatings: [],
      getSeller: {},
      getGoods: [],
      label: "1",
      active: "商品",
      isMasks: false,
      name: "",
      isFooterShow: true,
      seller: {
        id: qs.parse(location.search).id
      }
    };
  },
  created() {
    this._getSeller();
  },
  methods: {
    _getSeller() {
      getSeller({
        id: this.seller.id
      }).then(seller => {
        this.seller = Object.assign({}, this.seller, seller);
      });
    }
  },
  computed: {
    tabs() {
      return [
        {
          label: "商品",
          component: Goods,
          data: {
            seller: this.getSeller
          }
        },
        {
          label: "评论",
          component: Ratings,
          data: {
            seller: this.getSeller
          }
        },
        {
          label: "商家",
          component: Seller,
          data: {
            seller: this.getSeller
          }
        }
      ];
    }
  },
  watch: {
    gallDatas(news) {
      console.log(news);
    }
  },

  methods: {
    async allEle() {
      const result = await getVal();
      try {
        this.getSeller = result.data.seller;
        this.getRatings = result.data.ratings;
        this.getGoods = result.data.goods;
      } catch (error) {
        console.log(error);
      }
    },

    async showMask(isTrue) {
      this.isMasks = isTrue;
    },
    btnTabsfn(val) {
      console.log(val);
    },
    goodsFn() {
      // this.tabs = [...this.getGoods];
      // console.log(this.tabs);
      // this.tabGetSeller = this.getSeller;
    },
    clickHandler(label) {
      // if you clicked home tab, then print 'Home'
      console.log(label);
    },
    changeHandler(label) {
      // if you clicked different tab, this methods can be emitted
    },

    hideMaskFn(hideMask) {
      this.isMasks = hideMask;
    },
    homeContents(name) {
      this.name = name;
    }
  },
  created() {
    this.allEle();
    this.goodsFn();
  }
};
</script>
</script>
<style lang="stylus" rel="stylesheet/stylus">
.fn-hide, .fnHide {
  display: none !important;
}

.tab-wrapper {
  position: fixed;
  top: 149px;
  left: 0;
  right: 0;
  bottom: 0;
}</style>
